<template>
  <div>
   <div v-for="(item,index) in habitList.length">
     <Task :mssg=habitList[index]></Task>
<!--     <h1>{{item}}</h1>-->
  </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {request} from "../network/request";



import HelloWorld from '@/components/HelloWorld';
import Picker from '@/components/Picker';
import Task from '@/components/Task';

export default {
  name: 'HabitList',
  data () {
    return {
      images: [],
      msg: 'Welcome to Your Vue.js App',
      switchChecked: false,
      value: 0,
      habit1:'',
      habitList:[],

    }
  },
  components: {
    // cpn使用组件时的标签名
    HelloWorld:HelloWorld,
    Picker:Picker,
    Task:Task

  },
  created() {
    this.getCardByHabitId();
  },

  methods: {
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
    start() {
      this.$refs.countDown.start();
    },
    pause() {
      this.$refs.countDown.pause();
    },
    reset() {
      this.$refs.countDown.reset();
    },
    finish() {
      Toast('倒计时结束');
    },

    //获取每日任务，和卡片（同步，还是异步加载）
    getCardByHabitId(){
      console.log("kaishi");
      request({
        url: '/habit/getHabitList',
        method:'get'
      }).then(res => {
        this.habitList=res.data;
        console.log(res);
        console.log("kaishi====");
      }).catch(err => {
        console.log(err);
      })
    }
  },

}
</script>

<style scoped>
.task{
  padding-bottom: 50px;
}

.my-swipe .van-swipe-item {
  /*color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  border-radius: 30px;
  height: 150px;
  width: 350px;*/

  color: #fff;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #39a9ed;
  height: 150px;
  border-radius:10px;
  /*margin:10px;*/
  box-sizing: border-box;
  /*width: 350px;*/
  height: 150px
}

.swiper-box {
  margin: 30px;
  border-radius: 30px;
  overflow: hidden;
  /* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
  transform: translateY(0);
}

.my-swipe .van-swipe-item p{
  text-indent: 2em;
  font-size: 10px;
  /* height: 150px;
   width: 350px;
   word-wrap:break-word;
   word-break:normal;*/
}
</style>
